import React, { useState } from 'react';
import { Button, Form, Input, Select, DatePicker, message } from 'antd';
import './Courseadd.scss'
import { useLocation, useNavigate } from 'react-router-dom'
import axios from 'axios';

const Courseadd = () => {
    //获取回显的id
    const location = useLocation();
    const { record } = location.state || {};
    console.log(record);

    //定义record的状态
    const [recordState, setrecordState] = useState(record)

    //获取Input里面的输入框
    const { TextArea } = Input;
    
    var navigate = useNavigate()

    const [form] = Form.useForm();

    // const edit = () => {
    //     //回显数据到表单
    //     console.log("我执行了");
    //     form.setFieldsValue(record);
    // }
    // edit()

    //返回
    var handleClick = () => {
        navigate('/index/course')
    }
    //成功的回调
    const onFinish = (values: any) => {
        // console.log('Success:', values);
        console.log(record);
        // setAdminid(values)
        if (recordState === undefined) {
            // console.log('Success:', values.time.format('YYYY-MM-DD').toString());
            axios({
                method: "post",
                url: "http://localhost:3000/course",
                data: {
                    name: values.name,
                    jieshao: values.jieshao,
                    teacher: values.teacher,
                    img: values.img,
                    bianhao: values.bianhao,
                    time: values.time.format('YYYY-MM-DD').toString(),
                    duration: values.chixu,
                    chixu: values.chixu,
                    class: values.class,
                    dizhi: values.dizhi,
                    staff: values.staff,
                    read: values.read,
                }
            }).then(res => {
                // console.log("成功");
                message.success('新增成功！');
                navigate('/index/course')
            }).catch(error => {
                // console.log("失败");
                message.error('新增失败！');
            })
        } else {
            console.log("编辑");
            // 编辑课程
            axios({
                method: "put",
                url: `http://localhost:3000/course/${record.id}`,
                data: {
                    name: values.name?values.name:record.name,
                    jieshao: values.jieshao?values.jieshao:record.jieshao,
                    teacher: values.teacher?values.teacher:record.teacher,
                    img: values.img?values.img:record.img,
                    bianhao: values.bianhao?values.bianhao:record.bianhao,
                    time: values.time.format("YYYY-MM-DD").toString()?values.time.format("YYYY-MM-DD").toString():record.time,
                    duration: values.chixu?values.chixu:record.chixu,
                    chixu: values.chixu?values.chixu:record.chixu,
                    class: values.class?values.class:record.class,
                    dizhi: values.dizhi?values.dizhi:record.dizhi,
                    staff: values.staff?values.staff:record.staff,
                    read: values.read?values.read:record.read,
                },
            })
                .then((res) => {
                    message.success("更新成功！");
                    navigate("/index/course");
                })
                .catch((error) => {
                    message.error("更新失败！");
                });
        }
    };
    //失败的回调
    const onFinishFailed = (errorInfo: any) => {
        console.log('Failed:', errorInfo);
        // message.error("请仔细检查,开课时间重新选择！");
    };

    return (
        <div className='courseadd'>
            <div className='header'>
                <div>新增课程</div>
                <Button type="primary" onClick={handleClick}>{'<'}返回</Button>
            </div>
            <div className='form'>
                <Form
                    form={form}
                    name="basic"
                    // labelCol={{ span: 8 }}
                    // wrapperCol={{ span: 16 }}
                    // style={{ maxWidth: 600 }}
                    initialValues={{ record }}
                    onFinish={onFinish}
                    onFinishFailed={onFinishFailed}
                >
                    <h3>课程详情</h3>
                    <div className='box'>
                        <div className='left'>
                            <div>课程名称</div>
                            <Form.Item
                                name="name"
                                rules={[{ required: false, message: '请输入课程名称!' }]}
                            >
                                <Input placeholder="课程名称" defaultValue={record ? record.name : ''} />
                            </Form.Item>

                            <div>课程介绍</div>
                            <Form.Item name="jieshao" rules={[{ required: false, message: '请输入课程介绍!' }]}>
                                <TextArea rows={4} placeholder="课程介绍" defaultValue={record ? record.jieshao : ''} />
                            </Form.Item>

                            <div>授课老师</div>
                            <Form.Item name="teacher" rules={[{ required: false, message: '请输入授课老师!' }]}>
                                <Select placeholder="授课老师" defaultValue={record ? record.teacher : ''}>
                                    <Select.Option value="杰克">杰克</Select.Option>
                                    <Select.Option value="珍妮">珍妮</Select.Option>
                                    <Select.Option value="大贵">大贵</Select.Option>
                                </Select>
                            </Form.Item>

                            <div>图片地址</div>
                            <Form.Item
                                name="img"
                                rules={[{ required: false, message: '请输入图片地址!' }]}
                            >
                                <Input placeholder="图片地址" defaultValue={record ? record.img : ''} />
                            </Form.Item>

                            <div>阅读情况</div>
                            <Form.Item
                                name="read"
                                rules={[{ required: false, message: '请输入阅读情况!' }]}
                            >
                                <Input placeholder="阅读情况" defaultValue={record ? record.read : ''} />
                            </Form.Item>
                        </div>

                        <div className='right'>
                            <div>课程编号</div>
                            <Form.Item
                                name="bianhao"
                                rules={[{ required: false, message: '请输入课程编号!' }]}
                            >
                                <Input placeholder="课程编号" defaultValue={record ? record.bianhao : ''} />
                            </Form.Item>

                            <div>开课日期 (编辑时必须重新选择!)</div>
                            <Form.Item name="time" rules={[{ required: false, message: '请选择开课日期!' }]} >
                                <DatePicker placeholder="开课日期" value={record?record.time:''} />
                            </Form.Item>

                            <div>持续时间</div>
                            <Form.Item
                                name="chixu"
                                rules={[{ required: false, message: '请输入持续时间!' }]}
                            >
                                <Input placeholder="持续时间" defaultValue={record ? record.chixu : ''} />
                            </Form.Item>

                            <div>授课班级</div>
                            <Form.Item name="class" rules={[{ required: false, message: '请选择授课班级!' }]}>
                                <Select placeholder="授课班级" defaultValue={record ? record.class : ''}>
                                    <Select.Option value="高一(1)班">高一(1)班</Select.Option>
                                    <Select.Option value="高二(1)班">高二(1)班</Select.Option>
                                    <Select.Option value="高三(1)班">高三(1)班</Select.Option>
                                </Select>
                            </Form.Item>

                            <div>上课地址</div>
                            <Form.Item
                                name="dizhi"
                                rules={[{ required: false, message: '请输入上课地址!' }]}
                            >
                                <Input placeholder="上课地址" defaultValue={record ? record.dizhi : ''} />
                            </Form.Item>

                            <div>发布人员</div>
                            <Form.Item
                                name="staff"
                                rules={[{ required: false, message: '请输入发布人员!' }]}
                            >
                                <Input placeholder="发布人员" defaultValue={record ? record.staff : ''} />
                            </Form.Item>
                        </div>
                    </div>

                    <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                        <Button type="primary" htmlType="submit">
                            新增
                        </Button>
                    </Form.Item>
                </Form>
            </div>
        </div>
    );
};

export default Courseadd;